<template>
  <div class="dutyManage">
    <el-form :inline="true" :model="formData">
      <el-form-item label="岗位名称">
        <el-input
          v-model="formData.positionName"
          clearable
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="inquireDutyLoading"
          type="primary"
          @click.stop="initial"
          >查询</el-button
        >
        <el-button @click.stop="onClear">重置</el-button>
      </el-form-item>
    </el-form>
    <el-editable
      class="dutyManage-center"
      v-loading="submitLoading"
      :data="dutyList"
      height="200"
      :custom-attr="$TABLE_HEAD['systemSetup.dutyManage.list']"
      :columns="dutyManageColumns"
    >
      <template slot="default-operation" slot-scope="scope">
        <el-button
          size="small"
          @click.stop="handleTableRowUpdate(scope)"
          type="text text-primary"
          >修改</el-button
        >
        <el-button
          size="small"
          @click.stop="handleTableRowDel(scope)"
          type="text text-primary"
          >删除</el-button
        >
      </template>
    </el-editable>
    <!-- 分页插件 -->
    <el-pagination
      align="right"
      class="pagination-box"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="PAGE_NUMBER"
      :page-size="pageSize"
      :layout="PAGINATION_LAYOUT"
      :total="totalElements"
    />
    <!-- 新增岗位 -->
    <el-dialog
      :title="flagUpdate ? '修改岗位' : '新增岗位'"
      height="250"
      @close="dialogClose"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-form
        ref="dialogForm"
        v-loading="dialogLoading"
        :model="dialogFormData"
        :rules="formRules"
        label-width="80px"
      >
        <el-form-item label="岗位名称" prop="positionName">
          <el-input
            placeholder="请输入"
            v-model="dialogFormData.positionName"
            class="input-duty"
          />
        </el-form-item>
        <el-form-item label="所属部门" prop="orgId">
          <el-cascader
            :loading="orgLoading"
            v-model="dialogFormData.orgId"
            :options="orgOptions"
            :show-all-levels="false"
            @change="getMerchanPosition"
            :props="{
              expandTrigger: 'hover',
              checkStrictly: true,
              label: 'name',
              value: 'orgId'
            }"
          />
        </el-form-item>
        <el-form-item label="上级岗位" prop="parentPositionId">
          <el-select
            v-model="dialogFormData.parentPositionId"
            :disabled="!dutyOptions.length"
            placeholder="请选择"
          >
            <el-option
              :loading="parentPositionLoading"
              v-for="item in dutyOptions"
              :key="item.id"
              :label="item.positionName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位描述" prop="positionDesc">
          <el-input
            type="textarea"
            :rows="4"
            maxlength="200"
            placeholder="请输入内容"
            v-model="dialogFormData.positionDesc"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :loading="addDutyLoading" type="primary" @click="addDuty"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  UcMerchantPositionList,
  getAllUcMerchantPosition,
  UcMerchantPositionGetById,
  UcMerchantPositionDeleteById,
  UcMerchantPositionUpdate,
  UcMerchantPositionSave,
  getAllUcOrganization
} from '@const/api_staffCenter.js'
import ElEditable from '@components/el-editable/door/index.vue'
import {dutyManageColumns, formRules} from './const.js'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common.js'
import {hasIn, isArray} from 'lodash'
export default {
  name: 'DutyManage',
  components: {ElEditable},
  data() {
    return {
      formRules,
      dutyManageColumns,
      dialogFormData: {
        positionName: '',
        orgId: '',
        parentPositionId: '',
        positionDesc: ''
      },
      flagUpdate: false, // 修改还是新增岗位
      // 查询的条件数据
      formData: {
        positionName: ''
      },
      submitLoading: false, // table的loading
      dutyList: [], // table的数据
      inquireDutyLoading: false, // 搜索的loading
      dialogVisible: false, // 新增弹出层
      dutyOptions: [], // 上级岗位
      orgOptions: [], // 所属部门
      parentPositionLoading: false, // 上级岗位的loading
      orgLoading: false, // 所属部门的loading
      dialogLoading: false, // 弹出层的loading
      addDutyLoading: false, // 添加职务的Loading
      selectRowId: '', // 选中的id
      // 分页
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0
    }
  },
  mounted() {
    // 获取列表数据
    this.initial()
    // 获取组织树
    this.getOrgTree()
    this.$store.commit('changeLayoutHandle', {
      type: 'btn',
      arr: [{type: 'primary', val: '新增', handle: this.showAddDialog}]
    })
  },
  methods: {
    // 根据条件查询职务列表
    initial() {
      this.curPage = 1
      this.inquireDutyLoading = true
      this.submitLoading = true
      this.$axios({
        method: 'post',
        url: UcMerchantPositionList,
        data: {
          positionName: this.formData.positionName, // 职务ID
          pageIndex: this.curPage,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          let obj = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.dutyList = obj.content || []
          this.totalElements = obj.totalElements
        })
        .finally(() => {
          this.inquireDutyLoading = false
          this.submitLoading = false
        })
    },
    // 获取岗位
    getMerchanPosition(arr, id = '') {
      this.parentPositionLoading = true
      this.$axios({
        url: getAllUcMerchantPosition,
        method: 'get',
        params: {id, orgId: arr[arr.length - 1]}
      })
        .then(res => {
          this.dutyOptions = hasIn(res, ['data', 'payload'])
            ? res.data.payload
            : []
        })
        .finally(() => {
          this.parentPositionLoading = false
        })
    },
    // 获取组织树
    getOrgTree() {
      this.orgLoading = true
      this.$axios({
        url: getAllUcOrganization,
        method: 'get'
      })
        .then(res => {
          this.orgOptions = hasIn(res, ['data', 'payload'])
            ? [res.data.payload]
            : []
        })
        .finally(() => {
          this.orgLoading = false
        })
    },
    // 打开岗位新增弹框
    showAddDialog() {
      this.selectRowId = ''
      this.flagUpdate = false
      this.dialogVisible = true
    },
    // 弹出层关闭触发操作
    dialogClose() {
      this.dutyOptions = []
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    },
    handleTableRowUpdate(scope) {
      this.selectRowId = scope.row.id
      this.flagUpdate = true
      this.dialogLoading = true
      this.dialogVisible = true
      this.$axios({
        url: UcMerchantPositionGetById,
        method: 'get',
        params: {id: scope.row.id}
      })
        .then(res => {
          let obj = hasIn(res, ['data', 'payload'])
            ? res.data.payload || {}
            : {}
          for (let item in this.dialogFormData) {
            this.dialogFormData[item] = obj[item] || ''
          }
          // 获取上级岗位
          this.getMerchanPosition([obj.orgId], obj.id)
        })
        .catch(() => {
          this.$message({type: 'warning', message: '获取岗位详情失败'})
        })
        .finally(() => {
          this.dialogLoading = false
        })
    },
    // 添加职务
    addDuty() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.addDutyLoading = true
          let oldId = this.dialogFormData.orgId
          this.$axios({
            method: 'post',
            url: this.selectRowId
              ? UcMerchantPositionUpdate
              : UcMerchantPositionSave,
            data: {
              id: this.selectRowId,
              positionName: this.dialogFormData.positionName,
              orgId: isArray(oldId) ? oldId[oldId.length - 1] : oldId,
              parentPositionId: this.dialogFormData.parentPositionId,
              positionDesc: this.dialogFormData.positionDesc
            }
          })
            .then(res => {
              this.initial()
              this.dialogVisible = false
            })
            .finally(() => {
              this.addDutyLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 页码更改
    handleSizeChange(size) {
      this.pageSize = size
      this.initial()
    },
    // 切换不一样的页面,重置一切数据
    handleCurrentChange(curPage) {
      this.curPage = curPage
      this.initial()
    },
    // 删除职务
    deleteDuty(scope) {
      this.submitLoading = true
      this.$axios({
        method: 'delete',
        url: UcMerchantPositionDeleteById,
        params: {
          id: scope.row.id
        }
      })
        .then(res => {
          this.initial()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 清空查询条件
    onClear() {
      this.formData = {
        dutytName: ''
      }
    },
    // 表格内的删除 // 删除职务
    handleTableRowDel(scope) {
      this.$confirm('此操作将删除该岗位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDuty(scope)
      })
    }
  }
}
</script>
<style lang="less">
.dutyManage {
  display: flex;
  flex-direction: column;

  .el-select {
    width: 100%;
  }

  .el-cascader {
    width: 100%;
  }

  .dutyManage-center {
    flex: 1;
  }

  .pagination-box {
    margin-top: 10px;
  }
}
</style>
